<template>
  <div class="pad-all-10">
    <el-form label-width="40px" size="mini">
      <div class="header6 mar-btm-10">初始值</div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宽度">
            <el-input-number v-model="sourceRect.width" controls-position="right" disabled class="width-100">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度">
            <el-input-number v-model="sourceRect.height" controls-position="right" disabled class="width-100">
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="flex-justify-between mar-top-btm-10">
        <div class="header6">目标值</div>
        <el-checkbox v-model="keepRatio" @change="keepRatioChange">等比例</el-checkbox>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宽度">
            <el-input-number
              v-model="targetRect.width" :min="0"
              controls-position="right" class="width-100"
              @change="targetWidthChange">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度">
            <el-input-number
              v-model="targetRect.height" :min="0"
              controls-position="right" class="width-100"
              @change="targetHeightChange">
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="flex-justify-center mar-top-10">
        <el-button
	        :disabled="!different" type="primary"
	        size="small" class="width-30"
	        @click="scaleTransformConfirm">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";
  import {WidgetClass, widgetHashKeys} from "@/modules/IDE/widget/atom/widget";
  import moment from "moment";
  import {deepCopy} from "@/utils";
  import {PageHandler} from "@/modules/IDE/pageHandler";
  import {mapState} from "vuex";

  export default {
    name: 'WidgetScaleControl',
	  props: {
      widget: {
        type: WidgetClass,
        default: () => {
          return {};
        }
      },
      isGlobal: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        keepRatio: false,
        sourceRect: {width: 0, height: 0},
        targetRect: {width: 0, height: 0},
	      selectFlattenWidgets: []
      }
    },
	  computed: {
		  ...mapState({
			  curPageHandler: state => state.ide.curPageHandler,
			  curSubPageHandler: state => state.ide.curSubPageHandler,
		  }),
	    different() {
		    const {width: sWidth, height: sHeight} = this.sourceRect;
		    const {width: tWidth, height: tHeight} = this.targetRect;
		    return sWidth !== tWidth || sHeight !== tHeight;
	    }
	  },
    mounted() {
      this.calcInitRect();
      this.getSelectFlattenWidgets();
    },
    methods: {
      calcInitRect() {
        const sourceWidget = this.isGlobal ? WidgetFactory.production.find(widget => {
          return widget.isRoot && !widget.subPageId;
        }) : this.widget;
        if (!sourceWidget) return;
        const {width = 0, height = 0} = sourceWidget.rect;
        this.sourceRect = {width: width, height: height};
        this.targetRect = {width: width, height: height};
      },
	    // 获取当前选中的所有组件的子组件集合
	    getSelectFlattenWidgets() {
		    let destWidgets = [];
		    if (this.isGlobal) {
					const rootPages = this.curPageHandler.pages;
					const rootSubPages = this.curSubPageHandler.pages;
					[rootPages, rootSubPages].forEach(pages => {
						pages.forEach(widget => {
							const widgets = WidgetFactory.getWidgetFlattenChildren(widget, false);
							destWidgets = destWidgets.concat(widgets);
						});
					});
		    } else {
			    WidgetFactory.getWidgetFlattenChildren(this.widget, false).forEach(widget => {
				    destWidgets.push(widget);
				    const {relateSubPageId} = widget;
				    if (relateSubPageId) {
					    // 如果子页面的关联组件，则需要同时更改组件本身以及关联的子页面
					    const subPage = WidgetFactory.getWidgetById(relateSubPageId);
					    if (!subPage) return;
					    const subPageWidgets = WidgetFactory.getWidgetFlattenChildren(subPage, false);
					    subPageWidgets.forEach(widget => destWidgets.push(widget));
				    }
			    });
		    }
				const destWidgetIds = _.map(destWidgets, 'id') || [];
				destWidgets.forEach(widget => {
					// 标志选中组件是否是第一层级
					widget.isRootLevel = !destWidgetIds.includes(widget.parentId);
				});
				this.selectFlattenWidgets = destWidgets;
	    },
	    targetWidthChange() {
        if (this.keepRatio) {
          const wRatio = (this.targetRect.width - this.sourceRect.width) / this.sourceRect.width + 1;
          this.targetRect.height = Math.round(this.sourceRect.height * wRatio);
        }
      },
      targetHeightChange() {
        if (this.keepRatio) {
          const hRatio = (this.targetRect.height - this.sourceRect.height) / this.sourceRect.height + 1;
          this.targetRect.width = Math.round(this.sourceRect.width * hRatio);
        }
      },
      keepRatioChange() {
        this.keepRatio && this.targetWidthChange();
      },
      scaleTransformConfirm() {
	      this.$EventBus.$emit('widgetScaling', true);
				const {width: tWidth, height: tHeight} = this.targetRect;
	      // 记录组件变更前后的值，用于撤销/重做相关处理
				const widgetChangeArr = [];
	      this.selectFlattenWidgets.forEach(widget => {
					// 记录每个被更改组件的变更前后的值
					const oldWidget = WidgetFactory.getWidgetNecessaryProperty(widget);
		      // 组件缩放变换的具体处理函数
		      WidgetFactory.widgetScaleTransform(widget, this.sourceRect, this.targetRect);
					const newWidget = WidgetFactory.getWidgetNecessaryProperty(widget);
		      widgetChangeArr.push({from: oldWidget, to: newWidget});
	      });
        this.sourceRect.width = tWidth;
        this.sourceRect.height = tHeight;
	      WidgetFactory.undoRedoHdl.operationHdl([{operationType: 'edit', widgets: widgetChangeArr}]);
	      this.$nextTick(() => {
		      this.$emit('scaled');
		      this.$EventBus.$emit('widgetScaling', false);
	      });
        this.$emit('global-window', this.targetRect)
      }
    }
  }
</script>
